import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class HomeMenuBar extends StatefulWidget {
  const HomeMenuBar({super.key});

  @override
  State<HomeMenuBar> createState() => _HomeMenuBarState();
}

class _HomeMenuBarState extends State<HomeMenuBar> {
  int index = 0;

  List<Map> menuList = [
    {"title": "仪表盘", "icon": "menu_ybp.png", "id": 0},
    {"title": "项目", "icon": "menu_xm.png", "id": 1},
    {"title": "日历", "icon": "menu_rl.png", "id": 2},
    {"title": "假期", "icon": "menu_jjr.png", "id": 3},
    {"title": "雇员", "icon": "nemu_gy.png", "id": 4},
    {"title": "消息", "icon": "menu_msg.png", "id": 5},
    {"title": "门户网站", "icon": "menu_mh.png", "id": 6}
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      width: 200.w,
      padding: EdgeInsets.fromLTRB(16.w, 40.w, 0, 40.w),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(24.w))),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(left: 8.w),
            child: Image.asset(
              "images/logo.png",
              width: 50.w,
              height: 50.w,
            ),
          ),
          SizedBox(
            height: 10.w,
          ),
          Column(
            children: menuList.map((e) => menuRow(e)).toList(),
          ),
          Expanded(child: Container()),
          Image.asset("images/line_help.png", width: 168.w, height: 214.w),
          SizedBox(height: 50.w),
          Padding(
              padding: EdgeInsets.fromLTRB(0, 5.w, 0, 5.w),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      width: 172.w,
                      height: 44.w,
                      decoration: BoxDecoration(
                          borderRadius:
                              BorderRadius.all(Radius.circular(10.w))),
                      padding: EdgeInsets.fromLTRB(8.w, 5.w, 8.w, 5.w),
                      child: Row(
                        children: [
                          Image.asset("images/login_out.png",
                              width: 24.w, height: 24.w),
                          SizedBox(
                            width: 5.w,
                          ),
                          Text("退出登录"),
                        ],
                      ),
                    ),
                    SizedBox(
                      width: 2,
                      height: 44.w,
                    )
                  ]))
        ],
      ),
    );
  }

  Widget menuRow(Map menu) {
    return GestureDetector(
      onTap: () {
        setState(() {
          index = menu["id"];
        });
      },
      child: Padding(
          padding: EdgeInsets.fromLTRB(0, 5.w, 0, 5.w),
          child:
              Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            Container(
              width: 172.w,
              height: 44.w,
              decoration: BoxDecoration(
                  color: index == menu["id"]
                      ? const Color(0xfffecf3fe)
                      : Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(10.w))),
              padding: EdgeInsets.fromLTRB(8.w, 5.w, 8.w, 5.w),
              child: Row(
                children: [
                  Image.asset(
                    "images/" + menu["icon"],
                    width: 24.w,
                    height: 24.w,
                    color: index == menu["id"]
                        ? const Color(0xff3F8CFF)
                        : const Color(0xff7D8592),
                  ),
                  SizedBox(
                    width: 5.w,
                  ),
                  Text(
                    menu["title"],
                    style: TextStyle(
                        color: index == menu["id"]
                            ? const Color(0xff3F8CFF)
                            : const Color(0xff7D8592)),
                  ),
                ],
              ),
            ),
            Container(
              decoration: BoxDecoration(
                  color: index == menu["id"]
                      ? const Color(0xff3F8CFF)
                      : Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(2.w))),
              padding: EdgeInsets.fromLTRB(8.w, 5.w, 8.w, 5.w),
              width: 4.w,
              height: 44.w,
            )
          ])),
    );
  }
}
